<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mini.css-2.3.2/dist/mini-nord.min.css">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/js/vue.js"></script>
  <script src="/js/api.js"></script>
  <title>Package Manage</title>
  <style>
     :root {
      --HEADER-HEIGHT: 6vh;
      --FOOTER-HEIGHT: 10.7vh;
    }

    #package-list {
      width: 95%;
    }

    tbody td {
      text-align: right;
    }

    tbody td:first-child {
      text-align: left;
    }

    #content {
      min-height: calc(100vh - var(--FOOTER-HEIGHT) - var(--HEADER-HEIGHT));
    }

    header {
      height: var(--HEADER-HEIGHT);
    }

    footer {
      height: 3vh;
    }
  </style>
</head>

<body>
  <div id="main">
    <header class="sticky">
      <a href="#" class="logo">Package Manage</a>
      <button>HOME</button>
    </header>
    <div id="content" class="container">
      <div class="row">
        <div class="col-sm">
          <input type="file" ref="file" id="file-input" name="zipfile" @change="fileChange"/>
          <label for="file-input" class="button">Upload file...</label>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <progress :value="progress" max="100"></progress>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <table id="package-list">
            <caption>Package List</caption>
            <thead>
              <tr>
                <th>文件名</th>
                <th>上传日期</th>
                <th>文件尺寸</th>
                <th>端口</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="file in files">
                <td data-label="filename">{{ file.detail.name }}</td>
                <td data-label="date">{{ file.detail.ctime }}</td>
                <td data-label="size">{{ file.detail.size }}</td>
                <td v-if="file.port === -1" data-label="port">
                  N/A
                </td>
                <td v-else data-label="port">
                  <a target="_blank" :href="`${host}:${file.port}`">{{file.port}}</a>
                </td>
                <td data-label="handle">
                  <div v-if="file.port == -1" class="button-group">
                    <button @click="start(file)" v-if="file.hasDir" class="primary">创建服务</button>
                    <button @click="extract(file)" v-if="!file.hasDir" :disabled="file.extracting" class="primary">解压到目录</button>
                    <button @click="deleteItem(file)" class="secondary">删除</button>
                  </div>
                  <div v-else>
                    <button @click="close(file)" class="secondary">关闭静态服务</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div>
      <footer class="sticky">
        <p>&copy; 2001-2017 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
      </footer>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#main',
      mounted() {
        this.reflush();
      },
      data: {
        files: {},
        progress: 0,
        host: `${location.protocol}//${location.hostname}`,
      },
      methods: {
        /**
         * 刷新项目
         * 
         */
        reflush() {
          pmTools.api.getState().then(data => {
            const keys = Object.keys(data.items);
            for (let i = 0; i < keys.length; i++) {
              data.items[keys[i]].extracting = false;
            }
            this.files = data.items;
          }).catch(err => {
            console.error(err.message);
          });
        },
        /**
         * 文件上传
         */
        fileChange() {
          // pmTools.api.updateFile(this.$refs.file && this.$refs.file.files[0])
          const fileInfo = pmTools.api.getFileInfo(this.$refs.file && this.$refs.file.files[0])
          if (fileInfo) {
            pmTools.api.updateFile(fileInfo, this.uploadProgress)
              .then(() => {
                this.reflush();
              })
          }
        },
        /**
         * 删除项
         */
        deleteItem({ file }) {
          if (confirm('确定删除吗？')) {
            pmTools.api.deleteItem(file)
              .then(() => {
                this.reflush();
              })
          }
        },
        /**
         * 文件上传进度条
         */
        uploadProgress(evt) {
          if (evt.lengthComputable) {
            this.progress = (evt.loaded * 100 / evt.total).toFixed(2);
          }
        },
        /**
         * 解压文件
         */
        extract(item) {
          item.extracting = true;
          pmTools.api.extractFile(item.file).then(() => this.reflush());
        },
        /**
         * 启动服务
         */
        start(item) {
          pmTools.api.start(item.file).then(() => this.reflush());
        },
        /**
         * 关闭静态服务
         */
        close(item) {
          if (confirm(`确定关闭端口 ${item.port} 的服务吗？`)) 
            pmTools.api.close(item.file).then(() => this.reflush());
        }
      }
    })
  </script>
</body>

</html>